vue引入svg图标（svg

您所在的位置：网站首页 › vue svg图标 › vue引入svg图标（svg

vue引入svg图标（svg

#vue引入svg图标（svg| 来源: 网络整理| 查看: 265

安装 svg-sprite-loader

npm i svg-sprite-loader

components下面创建svg文件然后下面再来一个index.vue 在这里插入图片描述 index.vue

export default { name: "SvgIcon", props: { iconClass: { type: String, required: true, }, className: { type: String, default: "", }, }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { if (this.className) { return "svg-icon " + this.className; } else { return "svg-icon"; } }, }, }; .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

src下面创建 icons文件下面由svg图标和index.js 在这里插入图片描述 index.js

import Vue from 'vue' import SvgIcon from '@/components/svg'// svg组件 // register globally Vue.component('svg-icon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)

vue.config.js 配置 svg-sprite-loader

const path = require('path') module.exports = { // 输出文件目录 outputDir: 'PC', // eslint-loader 是否在保存的时候检查 lintOnSave: false, //关闭eslint chainWebpack: () => { }, productionSourceMap: false,//代码可读性 // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, parallel: require('os').cpus().length > 1, pwa: {}, // eslint-disable-next-line no-dupe-keys chainWebpack: config => { //修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title config.plugin('html') .tap(args => { args[0].title = "腕豪求抱抱"; return args; }) //配置 svg-sprite-loader // 第一步：让其他svg loader不要对src/icons进行操作 config.module .rule('svg') .exclude.add(resolve('src/icons'))//注意：路径要具体到存放的svg的路径下，不然会报错 .end() // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作 config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons'))//注意：路径要具体到存放的svg的路径下，不然会报错 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') //定义规则使用时 .options({ symbolId: 'icon-[name]' }) .end() }, // webpack-dev-server 相关配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => { } }, // 第三方插件配置 pluginOptions: { // ... } } // 重要!!! function resolve (dir) { return path.join(__dirname, dir) }

main.js引入

import './icons'

使用

结束

【本文地址】

vue引入svg图标（svg

vue引入svg图标（svg

今日新闻

推荐新闻